<template>
  <view class="custom-checkbox" @click="toggle">
    <!-- 动态显示选中/未选中图片 -->
    <!-- <image
      class="checkbox-icon"
      :src="isChecked ? checkedIcon : uncheckedIcon"
      mode="aspectFit"
    /> -->
    <IconFont font-class-name="iconfont" :class="isChecked ? 'yes' : 'no'" class-prefix="icon" name="ziyuan" size="20"/>
    <!-- 可选文字内容 -->
    <text v-if="$slots.default" class="label">
      <slot />
    </text>
  </view>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import checkno from "@/assets/icon/check.svg";
import checkyes from "@/assets/icon/check-a.svg";
import { IconFont } from "@nutui/icons-vue-taro";

const props = defineProps({
  // v-model 绑定值
  modelValue: {
    type: Boolean,
    required: true,
  },
  // 选中状态图标
  // checkedIcon: {
  //   type: String,
  //   default: checkyes, // 替换为你的选中图标地址
  // },
  // // 未选中状态图标
  // uncheckedIcon: {
  //   type: String,
  //   default: checkno, // 替换为你的未选中图标地址
  // },
});

const emit = defineEmits(["update:modelValue"]);

// 计算属性处理选中状态
const isChecked = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

// 切换选中状态
const toggle = () => {
  isChecked.value = !isChecked.value;
};
</script>

<style lang="scss">
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  padding: 4rpx;
  cursor: pointer;

  .checkbox-icon {
    width: 40rpx;
    height: 40rpx;
    transition: opacity 0.3s ease;
  }

  .label {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-left: 10rpx;
  }

  // 添加点击反馈效果
  &:active {
    opacity: 0.7;
  }
}
.yes{
  color: var(--nut-primary-color);
}
.no{
  color: #999;
}
</style>
